<template>
   <section class="body">
        <h1>{{ disDocData.summary }}</h1>
        <div class="address">
            <span class="method-area">{{ disDocData.method }}</span>
            <p class="url">{{ disDocData.path }}</p>
        </div>
        <response-class v-if="disDocData.responses | isDefinition definitions" :dis-doc-data.sync="disDocData" :definitions="definitions"></response-class>
        <parameters v-ref:parameters :request-data.sync="requestData" :dis-doc-Data.sync="disDocData"></parameters>
        <div class="controll">
            <button type="button" @click="test('requestData')" class="pub_btn test">测试</button>
            <span class="pub_btn" @click="toggleRes" v-show="responsed">收起</span>
        </div>
        <result :response-data.sync="responseData" :request-data.sync="requestData" :base-url="baseUrl" v-show="resStatus" :dis-doc-Data.sync="disDocData"></result>
</section>
</template>
<script>
    import responseClass from './response-class'
    import parameters from './parameters'
    import result from './result'
    import tools from '../lib/tools'
    export default {
        props: ['disDocData', 'definitions', 'baseUrl'],
        data() {
            return {
                responseData: {
                    config: {},
                    data: {},
                    headers: {},
                    request: {},
                    status: {},
                    statusText: {}
                },
                requestData: {
                    query: {},
                    path: {},
                    formData: {}
                },
                ruleValidate: {},
                resStatus: false,
                responsed: false,
                tools
            }
        },
        events: {
            'route-change': function() {
                this.resStatus = false
                this.responsed = false
                this.requestData = {
                    query: {},
                    path: {},
                    formData: {}
                }
            }
        },
        methods: {
            test(name) {
                let _self = this
                let url = this.disDocData.path
                let queryString = tools.getQuery(this.requestData)
                let formData = tools.getForm(this.requestData)
                console.log(queryString, formData)
                url = tools.getRealUrl(this.disDocData, this.requestData)
                this.$refs['parameters'].$refs[name].validate((valid) => {
                    if (valid) {
                        _self.$http({
                            method: _self.disDocData.method,
                            url: '/api' + url + queryString,
                            data: formData
                        }).then(_self.responseHandle()).catch(_self.responseHandle())
                    } else {
                        this.$Message.error('表单验证失败!');
                    }
                })
            },
            responseHandle: function() {
                let _self = this;
                return function(response) {
                    let res = response.response ? response.response : response
                    _self.responseData = res
                    _self.responsed = true
                    _self.resStatus = true
                    console.log(res)
                }
            },
            toggleRes() {
                this.resStatus = !this.resStatus
            }
        },
        components: {
            responseClass,
            parameters,
            result
        }
    }
</script>
<style lang="scss">
    .ivu-form-item-error-tip {
        display: none;
    }
    
    pre {
        margin: 0;
    }
    
    h1,
    h2 {
        margin: 15px 0;
    }
    
    .result {
        .hljs {
            border: 1px solid #e0e1e3;
        }
    }
</style>
<style scoped lang="scss">
    .code-area {
        white-space: nowrap;
    }
    
    .body {
        margin-left: 248px;
        border: 1px solid #e0e1e3;
        padding: 20px;
        background: #fff;
        border-radius: 4px;
        float: left;
        width: 752px;
        height: 100%;
        box-sizing: border-box;
        z-index: 0;
        .url {
            margin: 0;
        }
    }
    
    .body .address {
        width: 100%;
        border: 1px solid #e0e1e3;
        border-radius: 2px;
        background: #fcfcfc;
    }
    
    .body .method-area {
        color: #86a555;
        background: #f5f5f5;
        text-align: center;
        display: inline-block;
        padding: 6px;
        font-size: 18px;
        line-height: 24px;
    }
    
    .body .url {
        color: #5d5d67;
        font-size: 14px;
        line-height: 24px;
        display: inline-block;
        margin-left: 4px;
    }
    
    .body .parameters {
        input {
            width: 100%;
        }
    }
    
    .pub_btn {
        font-size: 14px;
        line-height: 22px;
        padding: 0 10px;
        display: inline-block;
        cursor: pointer;
        margin: 15px 6px;
        border-radius: 2px;
        outline: none;
        -webkit-appearance: none;
    }
    
    .test {
        border: 1px solid #cd9366;
        color: #cd9366;
        background: #fff;
        margin-left: 0;
    }
</style>